<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 6 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择01</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<link rel="stylesheet" media="screen and (max-width:991px)" href="css/max991.css" />
<link rel="stylesheet" media="screen and (max-width:479px)" href="css/max479.css" />

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery.ui.core.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery.ui.theme.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery.ui.datepicker.css">


<!--[if lt IE 8]>
 <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
 <script>DD_belatedPNG.fix("h1, a, h2, h3, img,.fixpng,.videos li");</script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->







</head>

<body>

<div class="wrapper">
  <div id="header" class="contentHead">
    <div class="center_wrapper">
      <div class="juiceUplogo">
        <div id="lg_indicator">
          <span class="menu_open_button"><img class="button" src="images/menu_open_button.png" width="40" height="40" /></span><a href=""><img src="images/xhm_logo.gif"></a>
        </div>
        <div id="lg">
          <a href=""><img src="images/juiceUp_logo.gif"></a>
        </div>
      </div>
    </div>
      
    <div class="topLinks">
      <div class="center_wrapper">
        <div class="topNews">New. 现北京地区支持在线订购，其他城市即将开通，敬请关注。</div>
        <div class="language"><a href="#">English</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" class="selected">中文</a></div>
        <div class="login">
          <a href="#">注 册</a>
          <a href="#">登 录</a>
          <a href="#">我的JuiceUp</a>
        </div>
      </div>
    </div>
      
    <div class="nav_wrapper">
      <div class="center_wrapper">
        <ul id="nav">
          <li><a href="#">清体排毒</a></li>
          <li>
            <a href="#">JuiceUp</a>
            <ul class="ml40">
              <span class="arrow"></span>
              <li><a href="#">不一样的JuiceUp</a></li>
              <li><a href="#">注意事项</a></li>
              <li><a href="#">果汁餐单</a></li>
            </ul>
          </li>
          <li>
            <a href="#">选择您的果汁</a>
            <ul class="ml22">
              <span class="arrow"></span>
              <li><a href="#">美味纤体系列</a></li>
              <li><a href="#">健康均衡系列</a></li>
              <li><a href="#">专家排毒系列</a></li>
              <li><a href="#">个性化搭配</a></li>
              <li><a href="#">在线测试</a></li>
              <li><a href="#">排毒疗程</a></li>
            </ul>
          </li>
          <li>
            <a href="#">价格及配送</a>
            <ul class="ml30">
              <span class="arrow"></span>
              <li><a href="#">价格及优惠</a></li>
              <li><a href="#">物流配送</a></li>
              <li><a href="#">订购须知</a></li>
            </ul>
          </li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">JuiceUp晒</a></li>
        </ul>
        <div class="cart"><a href="#"><i>立即订购</i><span class="iconCart"></span></a></div>
        <div class="cart_pad"><a href="#">立即订购</a></div>
      </div>
    </div>
  </div>
  
  
  <div id="page_modules">
    
    <div class="center_wrapper center_lineGreen clearfix">
      <div class="left_con_m">
        <div class="tile_left_m">
          <div class="tile_zh">订购疗程 欢迎您！</div>
          <div class="tile_en"><em class="black">Order</em><em class="darkGreen">juiceup</em><em class="lightGreen">Welcome</em></div>
        </div>
        
        <div class="order_warp">
        
            <div class="order_step">
              <ul>
              <li class="selected">第一步：疗程开始日期</li>
              <li>第二步：确认</li>
              <li>第三步：付款</li>
              </ul>
            </div>
            <div class="order_selected">
              <span class="tile">您当前选择的是</span>
              <span class="info"><em>Level 1：美味纤体系列</em>我们为首次参加排毒疗程者精心研制出的美味配方，丰富的水果成分使得排毒的过程更加愉悦。</span>
            </div>
            <div class="order_days">
              <span class="tile">选择清体疗程理想天数：</span>
              <ul class="order_days_select">
                <li><a href="javascript:void(0);" onClick="test(1)" class="">1</a></li>
                <li><a href="javascript:void(0);" onClick="test(3)" class="">3</a></li>
                <li><a href="javascript:void(0);" onClick="test(5)" class="">5</a></li>
                <li><a href="javascript:void(0);" onclick="test(7)" class="">7</a></li>
              </ul>
            </div>
            
            <div class="order_time_start">
              <span class="tile">疗程开始日期</span>
              <div class="order_time_Date">
                <div id="datepicker"></div>
              </div>
            </div> 
             
            <div class="order_time_week">
                <a class="previous" id="previousweek" onClick="previousWeek();">&lt;上一周</a>
                <span id="showdate"></span>
                <a class="next" onClick="nextWeek();">下一周&gt;</a>
            </div>
            <!--显示日期-->
            <div class="myOrderCalendarWarp">
              <div id="mytable" class="myOrderCalendar"></div>
            </div>
            
        </div>
        
      </div>
      <div class="right_con_m">
        <p class="hotLineRight">欢迎拨打<br />JuiceUp 清体健康热线：<br />4001-8-42779</p>
        <div class="orderConf">
          <h5>确认您的订单：</h5>
          <div class="price">产品：¥ 12345.00 RMB</div>
          <div class="shipping">运费：¥ 0 RMB</div>
          <div class="total">总价：¥ 12345.00 RMB</div>
          <div class="btn_next"><a href="javascript:void(0);">下一步</a></div>
        </div>
        <p><img src="images/icon_tips.gif" /></p>
        <h4 class="darkGreen">温馨提示：</h4>
        <div class="reminder_right idTabs">
          <div class="item">
            <h5><a href="#reminder_item01">订购截止时间<span class="icon_r"></span></a></h5>
            <div id="reminder_item01" class="info">
              <p>1.敬请在排毒日前至少2个工作日作出订购。例如您想在星期三开始排毒，则需在星期一12:00pm前订购，我们便会在星期二把果汁送达府上。</p>
              <p>2.但我们建议您在所选排毒日期前一个星期预定疗程，以确保您有足够的时间阅读并实施“排毒前注意事项”，预先调整饮食习惯，可令疗程的效果更佳显著，也可避免旺季时无法满足您的需求。</p>
            </div>
          </div>
          <div class="item">
            <h5><a href="#reminder_item02">更改及取消<span class="icon_r"></span></a></h5>
            <div id="reminder_item02" class="info">
              <p>们建议您在所选排毒日期前一个星期预定疗程们建议您在所选排毒日期前一个星期预定疗程</p>
            </div>
          </div>
          <div class="item">
            <h5><a href="#reminder_item03">多人订购优惠方法<span class="icon_r"></span></a></h5>
            <div id="reminder_item03" class="info">
              <p>星期预定疗程们建议您在所选排毒日期前一个星期预们建议您在所选排毒日期前一个定疗程</p>
            </div>
          </div>
          <div class="item">
            <h5><a href="#reminder_item04">索要发票方式<span class="icon_r"></span></a></h5>
            <div id="reminder_item04" class="info">
              <p>们建议您在所选排毒日期前一个星期预定疗程</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <div id="footer_modules">
    <div class="social">
      <div class="socialWrapper">
      <a href="#"><img src="images/sinaIcon.png" /><em>官方微博</em></a>
      <a href="#"><img src="images/wxIocn.png" /><em>官方微信</em></a>
      <a href="#"><img src="images/wsIcon.png" /><em>官方微视</em></a>
      <a href="#"><img src="images/myIcon.png" /><em>密友分享</em></a>
      <a href="#"><img src="images/instagramIcon.png" /><em>Instagram</em></a>
      </div>
    </div>
    <div class="footer_con">
      <div class="center_wrapper">
        <div class="inner">
          <div class="inner_list">
            <h2><a href="#footer1">清体排毒</a></h2>
            <ul id="footer1">
              <li><a href="#">什么是毒素</a></li>
              <li>即刻排毒</li>
            </ul>
          </div>
          <div class="inner_list">
            <h2><a href="#footer2">JuiceUp</a></h2>
            <ul id="footer2">
              <li>不一样的JuiceUp</li>
              <li>注意事项</li>
              <li>果汁餐单</li>
              <li>冷压技术</li>
            </ul>
          </div>
          <div class="inner_list">
            <h2><a href="#footer3">选择您的果汁</a></h2>
            <ul id="footer3">
              <li>美味纤体系列</li>
              <li>健康均衡系列</li>
              <li>专家排毒系列</li>
              <li>个性化搭配</li>
              <li>在线测试</li>
              <li>排毒疗程</li>
            </ul>
          </div>
          <div class="inner_list">
            <h2><a href="#footer4">价格及配送</a></h2>
            <ul id="footer4">
              <li>价格及优惠</li>
              <li>物流配送</li>
              <li>订购须知</li>
            </ul>
          </div>
          <ul class="inner_contact">
            <h2>联系我们</h2>
            <p class="tile"><img src="images/emailIcon.png" />&nbsp;提交留言</p>
            <p class="form_con">
              <input class="t_tet" value="我感觉咱们产品" type="text"/>
              <input class="t_button" value="提交" type="submit" />
            </p>
            <img src="images/juiceUpCar.png" />
          </ul>
          <div class="footer_contact">
            <span class="tet"><span class="inlineBlock">CONTACT US</span>&nbsp;&nbsp;<span class="inlineBlock"><a href="mailto:info@juiceup.com">info@juiceup.com</a></span>&nbsp;&nbsp;<span class="inlineBlock">010 8964 2233</span></span>
            <span class="cp">&copy; 2014 CleanseDelight. All rights reserved. </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!---->
  <div class="go_top">返回顶端</div>
  <!---->
</div>






<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-zh-TW.js"></script>


<script type="text/javascript" src="js/juiceup.js"></script>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" src="js/jquery.glide.min.js"></script>

<script type="text/javascript">
	$('.sliderBanner').glide({});		
</script>





<script type="text/javascript">
		    var starti = 5;
		    var currDT;
		    var aryDay = new Array("日", "一", "二", "三", "四", "五", "六"); //显示星期  
		    var lastDay; //页面显示的最后一天
		    var firstDay; //页面显示的第一天
		    //初始化日期加载
		    function initDate(myDates) {
		        currDT = myDates;
		        tempDate = myDates;
		        minDatetime = new Date();
		        minDatetime.setDate(minDatetime.getDate() + 2);
		       
		        setcontent("a");
		        
		        //重新赋值
		        lastDay = getDays()[13]; //本周的最后一天
		        firstDay = getDays()[0]; //本周的第一天

		    }
		    //取得当前日期两周内的某天
		    function getWeek(i) {
		        var now = tempDate;
		        var n = now.getDay();
		        var start = new Date(tempDate);
		        n = n == 0 ? 7 : n;
		        start.setDate(now.getDate() - n + i); //取得一周内的第一天、第二天、第三天...
		        return start;
		    }

		    //取得当前日期两周内的14天
		    function getDays() {
		        var days = new Array();
		        for (var i = 0; i <= 14; i++) {
		            days[i - 1] = getWeek(i);
		        }
		        return days;
		    }

		    //取得下两周的日期数(共14天)
		    function getNextWeekDatas(ndt) {
		        var days = new Array();
		        for (var i = 1; i <= 14; i++) {
		            var dt = new Date(ndt);
		            days[i - 1] = getNextWeek(dt, i);
		        }
		        return days;
		    }
		 
		    //指定日期的下两周(后14天)
		    function getNextWeek(dt, i) {
		        var today = dt;
		        today.setDate(today.getDate() + i);
		        return today;
		    }


		    //取得上两周的日期数(共14天)
		    function getPreviousWeekDatas(ndt) {
		        var days = new Array();
		        for (var i = -14; i <= -1; i++) {
		            var dt = new Date(ndt);
		            days[14 + i] = getPreviousWeek(dt, i);
		        }
		        return days;
		    }

		    //指定日期的上两周(前14天)
		    function getPreviousWeek(dt, i) {
		        var today = dt;
		        today.setDate(today.getDate() + i);
		        return today;
		    }

		    //下两周
		    function nextWeek() {
		        currDT.setDate(currDT.getDate() + 14); //重设时间
		        setcontent("b");
		        firstDay = getNextWeekDatas(lastDay)[0]; //注意赋值顺序1
		        lastDay = getNextWeekDatas(lastDay)[13]; //注意赋值顺序2
		    }
		
		    var Data = [];
		    var type = "1"; //类别
		    
		    function setcontent(Days) {
		        if (Days == "a") {
		            var d =new Date(currDT);
		            
		            Data.length = 0;
		            for (var j = 0; j < starti; j++) {

		                s = j == 0 ? 0 : 1;
Data.push({ "id": j, "goodid": type, "sendtime": d.setDate(d.getDate() + s), "ordertype": type });
		                 
		            }
		        }

                
                
 
		        showdate.innerHTML = currDT.toLocaleDateString(); //显示日期  
		        //在表格中显示一周的日期  
		        var objTB = document.getElementById("mytable"); //取得表格对象
		        var dw = currDT.getDay(); //从Date对象返回一周中的某一天(0~6)
		        var tdDT; //日期
		        var $tr = $('<ul>');
		        $('#mytable').empty();
		        
		        for (var i = 0; i < 14; i++) {
		            if (Days == "a") {
		                tdDT = getDays()[i];

		            } else if (Days == "b") {
		                tdDT = getNextWeekDatas(lastDay)[i];
		            }
		            else {
		                tdDT = getPreviousWeekDatas(firstDay)[i];
		            }
		            if (i ==0) {
		                if (minDatetime - tdDT > 0 || minDatetime.Format("yyyy-MM-dd") == tdDT.Format("yyyy-MM-dd")) {
		                    $("#previousweek").hide();
		                }
		                else {
		                    $("#previousweek").show();
		                }
		            }
		            dw = tdDT.getDay(); //星期几

		            if (minDatetime - tdDT < 0 || minDatetime.Format("yyyy-MM-dd")==tdDT.Format("yyyy-MM-dd")) {


		                var itemst= jQuery.grep(
                Data, function (item, index) { return new Date(parseInt(item.sendtime, 10)).Format("yyyy-MM-dd") == tdDT.Format("yyyy-MM-dd"); });
		                
		                if (itemst.length>0) {
		                    var $td = $('<li>').html(tdDT.getMonth() + 1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw] + "6瓶id:" + itemst[0].id);
		                }
		                else {
		                    var $td = $('<li>').html(tdDT.getMonth() + 1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw]);
		                }

		                //   

		                $tr.append($td);


		                //objTB.rows[0].cells[i].style.color = "red";//currDT突出显示  
		            }
		            else {
		                var $td = $('<li>').html(tdDT.getMonth() + 1 + "月" + tdDT.getDate() + "日 星期" + aryDay[dw] + "亲，你错过了~");
		                $tr.append($td);



		            }
		        }
		        $("#mytable").append($tr);

		    }
		    Date.prototype.Format = function (fmt) { //author: meizz 
		        var o = {
		            "M+": this.getMonth() + 1, //月份 
		            "d+": this.getDate(), //日 
		            "h+": this.getHours(), //小时 
		            "m+": this.getMinutes(), //分 
		            "s+": this.getSeconds(), //秒 
		            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		            "S": this.getMilliseconds() //毫秒 
		        };
		        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		        for (var k in o)
		            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		        return fmt;
		    }
		    
		    //上一周
		    function previousWeek() {
		        currDT.setDate(currDT.getDate() - 14);
		        setcontent("c");
		        //重新赋值
		        lastDay = getPreviousWeekDatas(firstDay)[13]; //注意赋值顺序1
		        firstDay = getPreviousWeekDatas(firstDay)[0]; //注意赋值顺序2
		    }
</script>

<script  type="text/javascript">
	    $(function () {
	        var myDate = new Date();
	        myDate.setDate(myDate.getDate() + 2);
	        $("#datepicker").datepicker({ "minDate": myDate,
	            showOtherMonths: true,
	            selectOtherMonths: true,
	            onSelect: function (selectedDate) {
	                initDate(new Date(selectedDate));
	            }
	        });

	        initDate(myDate);
	    });
	    function test(v) {
	        starti = v;
	        initDate(currDT);
	    }
</script>






</body>
</html>
